<template>
  <ContentBox has-corner class="property-rank">
    <ContentBoxTitle title="物业公司排行" />
    <div class="property-rank__content">
      <RankList :list="list" :list-name="'wygsph'"></RankList>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import RankList from '@/components/RankList/index.vue'
export default {
  name: 'PropertyRank',
  components: {
    ContentBox,
    ContentBoxTitle,
    RankList
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
.property-rank {
  width: $base * 360px;
  height: $base * 320px;
  margin-top: $base * 10px;

  .content-box-title__content {
    width: $base * 300px;
  }
  .property-rank__content {
    padding: 19px 16px;
    height: calc(100% - #{$base * 45px});
    overflow: hidden;

    &:hover {
      overflow: auto;
    }
    .rank-item__name {
      width: $base * 100px;
    }
  }
}
</style>